<script lang="ts" setup>
	import AppProvider from '@/components/AppProvider/index.vue';
	import { Toast } from '@/utils/uniapi/prompt';
	import { useUserStore } from '@/state/modules/user';
	import { login } from '@/services/api/auth';
	import { useRequest } from 'alova';

	const userStore = useUserStore();
	const userForm = reactive({
		username: '',
		password: '',
		tel: '',
		code: '',
		loginType: 1
	});

	const { send: sendLogin } = useRequest(login, { immediate: false });
	const handleSave = (e : any) => {
		if (!userForm.username) {
			Toast('请输入手机号', { duration: 1500 });
			return;
		}
		if (!userForm.password) {
			Toast('请输入密码', { duration: 1500 });
			return;
		}
		sendLogin(userForm).then((res) => {
			Toast('登录成功', { duration: 1500 });
		});
	};

	const radioChange = (e : any) => {

	}
	
	onLoad(() => {
	});

	onShow(() => {
	});
</script>

<template>
	<AppProvider>
		<view class="container">
			<view class="_u_px-4">
				<view class="_u_flex _u_items-center">
					<view class="_u_w-[66px] _u_flex">用户名称</view>
					<input v-model="userForm.username" class="input" type="text" placeholder="请输入用户名称" maxlength="30" />
				</view>
				<view class="_u_flex _u_items-center">
					<view class="_u_w-[66px] _u_flex">手机号码</view>
					<input v-model="userForm.tel" class="input" type="text" placeholder="请输入手机号码" maxlength="30"
						disabled />
				</view>
				<view class="_u_flex _u_items-center">
					<view class="_u_w-[66px] _u_flex">邮箱</view>
					<input v-model="userForm.username" class="input" type="text" placeholder="请输入邮箱" maxlength="30" />
				</view>
				<view class="_u_flex _u_items-center">
					<view class="_u_w-[66px] _u_flex">性别</view>
					<radio-group class="radio" @change="radioChange">
						<label>
							<radio value="r1" checked="true" />男
						</label>
						<label class="_u_ml-2">
							<radio value="r2" />女
						</label>
					</radio-group>
				</view>
			</view>
			<view class="_u_flex _u_mt-2 _u_justify-center _u_px-4">
				<button @click="handleSave" class="confirm-btn">修改信息</button>
			</view>
		</view>
	</AppProvider>
</template>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.input {
		width: 100%;
		margin: 10px 20px;
		padding-left: 10px;
		background-color: #f5f6f7;
		height: 45px;
		border-radius: 20px;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.radio {
		margin: 10px 20px;
		padding-left: 10px;
	}

	.confirm-btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: $uni-color-primary;
		color: #fff;
	}
</style>